<template>
  <div>
    <!-- 三点评吸设置 -->
    <div class="top w100 df jc-sb">
      <somkeTop :title="top_title" :list="top_list"></somkeTop>
      <div> <lay-button @click="close" class="layui-btn ">关闭</lay-button></div>
    </div>
    <div class="content">
      <div class="btn">
        <lay-button size="sm" style="background-color: #b8d8f8;color: #000;" @click="open_y">选择烟支</lay-button>
      </div>
      <div class="table-group">
        <!-- <lay-table :columns="columns" :data-source="y_list_sele" style="width:250px;max-height: 500px;">
          <template v-slot:operator="{ row }">
            <lay-button size="xs" type="primary" @click="del(row)">删除</lay-button>
          </template>
        </lay-table> -->

        <table border>
          <tr>
            <th>烟支名称</th>
            <th>烟支A名称</th>
            <th>烟支B名称</th>
            <th>操作</th>
          </tr>
          <tr v-for="item in y_list_sele" :key="item.id">
            <td>{{ item.smokeModel }}</td>
            <td><lay-input size="xs" @blur="smoke_blur(item)" type="text" v-model="item.smokeA" placeholder="请输入"></lay-input></td>
            <td><lay-input size="xs" @blur="smoke_blur(item)" type="text" v-model="item.smokeB" placeholder="请输入"></lay-input></td>
            <td> <el-button link @click="del(item)">删除</el-button> </td>
          </tr>
        </table>

      </div>
      <!-- <div class="footer-btn">
        <div></div>
        <div>
          <lay-button @click="close" class="layui-btn layui-bg-blue">关闭</lay-button>
        </div>
      </div> -->

    </div>

    <!-- 烟支弹层 -->
    <lay-layer v-model="y_visible" :area="['800px', '620px']" :title="'选择烟支'" :btn="y_visible_opteron">
      <div style="padding: 20px 40px 20px 20px;">
        <lay-table ref="tableRef3" :columns="y_columns" :data-source="y_dataSource" :default-toolbar="false" v-model:selectedKeys="y_selectedKeys">

        </lay-table>
      </div>
    </lay-layer>
  </div>
</template>

<script setup lang="ts">
import somkeTop from "@/components/somkeTop.vue";
import http from "@/http";
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { layer } from "@layui/layui-vue";
const router = useRouter();
const route = useRoute();
const id = route.query.id;
const info = ref([]);

const top_title = ref("三点评吸设置");
const top_list = ref([
  {
    name: "单位(部门)",
    content: "许昌卷烟厂",
    id: 1,
  },
  {
    name: "时间",
    content: new Date().toLocaleString(),
    id: 2,
  },
  {
    name: "编号",
    content: "Q/HNZY 101.3 001-15",
    id: 3,
  },
]);

const enter = async () => {
  console.log(info.value);

  let method = "post";
  if (info.value && info.value.length > 0) {
    method = "put";
  }

  const res = await http.corsApi("/meetingThreePoint", method, {
    allId: id,
    allowanceIdList: y_selectedKeys.value,
  });
  console.log(res);
  if (res.data) {
    layer.confirm("设置完成", { icon: 1 });
    y_visible.value = false;
    await get_detail();
    // setTimeout(() => {
    //   router.go(-1);
    // }, 1500);
  }
};
// 取消
const close = () => {
  router.go(-1);
};
// 删除
const del = async (row) => {
  const res = await http.corsApi(`/meetingThreePoint/${row.id}`, "delete", {});
  console.log(res);
  if (res.data) {
    await get_detail();
  }
  //   console.log(row);
  //   y_selectedKeys.value = y_selectedKeys.value.filter((item) => item != row.allowanceId);
  //   y_list_sele.value = y_list_sele.value.filter((item) => item.id != row.id);

  //   console.log(y_selectedKeys.value);
  //   console.log(y_list_sele.value);
};

const columns = ref([
  { title: "烟支名称", key: "smokeModel" },
  { title: "烟支A名称", key: "smokeA" },
  { title: "烟支B名称", key: "smokeB" },

  { title: "操作", customSlot: "operator", key: "operator", fixed: "right", ignoreExport: true },
]);

// ab名称修改
const smoke_blur = async (item) => {
  console.log(item);

  const res = await http.corsApi("/meetingThreePoint/editABName", "put", {
    id: item.id,
    smokeA: item.smokeA ? item.smokeA : null,
    smokeB: item.smokeB ? item.smokeB : null,
  });
  console.log(res);

  if (res.data) {
    layer.msg("修改成功", { icon: 1 });
  }

  await get_detail();
};

// 烟支弹层
const y_visible = ref(false);
// 烟支当前选中的key
const y_selectedKeys = ref([]);
// 烟支列表数据
const y_dataSource = ref([]);
// 烟支header    key
const y_columns = ref([
  { fixed: "left", type: "checkbox", title: "复选" },
  { title: "牌号", key: "smokeModel" },
  // { title: "价格", key: "smokePerk" },
]);
// 当前选中的烟支列表
const y_list_sele = ref([]);
// 烟支弹层操作
const y_visible_opteron = ref([
  {
    text: "确认",
    callback: async () => {
      // y_list_sele.value = [];
      // y_dataSource.value.map((ele) => {
      //   y_selectedKeys.value.map((item) => {
      //     if (ele.id == item) {
      //       y_list_sele.value.push(ele);
      //     }
      //   });
      // });
      // y_visible.value = false;

      await enter();

      console.log(y_list_sele.value);
      console.log(y_selectedKeys.value);
    },
  },
  {
    text: "取消",
    callback: () => {
      y_visible.value = false;
      //   layer.confirm("取消操作", { shade: false,icon:2 });
    },
  },
]);

// 选择烟支
const open_y = () => {
  y_visible.value = true;
};
// 获取烟支列表
const get_y_list = async () => {
  const res = await http.corsApi("/smokeAllowance", "get", {});
  console.log(res);
  y_dataSource.value = res.data;
};

// 获取页面初始信息
const get_detail = async () => {
  const res = await http.corsApi("/meetingThreePoint", "get", { allId: id });
  console.log(res);
  if (res.data) {
    y_selectedKeys.value = [];
    y_list_sele.value = [];
    res.data.forEach((element) => {
      y_selectedKeys.value.push(element.allowanceId);
      y_dataSource.value.forEach((item) => {
        if (element.allowanceId == item.id) {
          y_list_sele.value.push({ ...element, smokeModel: item.smokeModel });
        } 
      });
    });

    info.value = res.data;

    console.log(y_list_sele.value);
    console.log(y_selectedKeys.value);
  }
};
onMounted(async () => {
  await get_y_list();
  await get_detail();
});
</script>

<style scoped lang="scss">
.top {
  width: 100%;
  background-color: #fff;
  padding: 30px;
  box-sizing: border-box;
}
.content {
  width: 100%;
  background-color: #f5f5f5;
  padding: 30px 25px;
  box-sizing: border-box;
  .btn {
    margin-bottom: 15px;
  }
  .table-group {
    height: 500px;

    overflow-y: scroll;
    table {
      // width: 100%;
      width: 600px;
      overflow: auto;
      tr {
        th {
          padding: 10px;
          white-space: nowrap;
        }
        td {
          text-align: center;
          padding: 10px;
          white-space: nowrap;
        }

        .layui-input {
          background: transparent !important;
          border-color: #d9d4d4 !important;
        }
      }
    }
  }
}
.footer-btn {
  display: flex;
  justify-content: space-between;
  padding: 15px 40px;
  box-sizing: border-box;
}
</style>